<template>
    <view>
        <!-- 搜索组件 -->
        <view class="search-box">
            <my-search @myClick="gotoSearch"></my-search>
        </view>
        <!-- 轮播图区域 -->
        <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
            <swiper-item v-for="(item,i) in swiperList" :key="i">
                <navigator class="swiper-item" :url="'/subpkg/goods_detail/goods_detail?goods_id=' + item.goods_id">
                    <image :src="item.image_src" mode="widthFix"></image>
                </navigator>
            </swiper-item>
        </swiper>
        <!-- 分类导航区域 -->
        <view class="nav-list">
            <view class="nav-item" v-for="(item,i) in navList" :key="i" @click="navClickHandler(item)">
                <image :src="item.image_src" mode="widthFix" />
            </view>
        </view>
        <!-- 楼层区域 -->
        <view class="floor-list">
            <!-- 每一个楼层的项 -->
            <view class="floor-item" v-for="(item,i) in floorList" :key="i">
                <!-- 楼层标题图 -->
                <image :src="item.floor_title.image_src" class="floor-title"></image>
                <!-- 楼层图片区域 -->
                <view class="floor-img-box">
                    <!-- 左侧大盒子 -->
                    <navigator class="left-img-box" :url="item.product_list[0].url">
                        <image :src="item.product_list[0].image_src" mode="widthFix"
                            :style="{width:item.product_list[0].image_width+'rpx'}"></image>
                    </navigator>
                    <!-- 右侧四个小盒子 -->
                    <view class="right-img-box">
                        <navigator class="right-img-item" v-for="(item2,k) in item.product_list" :key="k" v-show="k!==0"
                            :url="item2.url">
                            <image :src="item2.image_src" mode="widthFix" :style="{width:item2.image_width+'rpx'}">
                            </image>
                        </navigator>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import MySearch from '@/components/my-search/my-search.vue'
    import badgeMix from '@/mixins/tabbar-badge.js'
    export default {
        mixins: [badgeMix],
        components: {
            MySearch
        },
        data() {
            return {
                swiperList: [],
                navList: [],
                floorList: []
            };
        },
        onLoad() {
            this.getSwiperList();
            this.getNavList();
            this.getFloorList();
        },
        methods: {
            async getSwiperList() {
                try {
                    const res = await uni.$http.get('/api/public/v1/home/swiperdata')
                    if (!res) {
                        return uni.$showMsg()
                    }
                    if (res.statusCode !== 200) {
                        return uni.$showMsg()
                    }
                    const data = res.data || res
                    this.swiperList = data.message || []
                } catch (error) {
                    console.error('轮播图请求异常:', error)
                    uni.showToast({
                        title: '网络请求失败',
                        duration: 1500,
                        icon: 'none'
                    })
                } finally {
                    uni.hideLoading()
                }
            },

            async getNavList() {
                try {
                    const res = await uni.$http.get('/api/public/v1/home/catitems')
                    if (!res) {
                        return uni.$showMsg('分类请求失败: 无响应')
                    }
                    if (res.statusCode !== 200) {
                        return uni.$showMsg('分类请求失败: ' + res.statusCode)
                    }
                    const data = res.data || res
                    this.navList = data.message || []
                    // uni.$showMsg('分类加载成功') // 移除不必要的提示
                } catch (error) {
                    console.error('分类请求异常:', error)
                    uni.showToast({
                        title: '分类请求失败',
                        duration: 1500,
                        icon: 'none'
                    })
                } finally {
                    uni.hideLoading()
                }
            },

            navClickHandler(item) {
                if (item.name === '分类') {
                    uni.switchTab({
                        url: '/pages/cate/cate'
                    })
                }
            },

            async getFloorList() {
                try {
                    const res = await uni.$http.get('/api/public/v1/home/floordata')
                    // console.log('获取楼层图的数据是', res)

                    if (!res) {
                        return uni.$showMsg('楼层请求失败: 无响应')
                    }
                    if (res.statusCode !== 200) {
                        return uni.$showMsg('楼层请求失败: ' + res.statusCode)
                    }

                    const data = res.data || res
                    const message = data.message || []

                    // 处理数据
                    message.forEach(floor => {
                        if (floor && floor.product_list) {
                            floor.product_list.forEach(prod => {
                                if (prod && prod.navigator_url) {
                                    prod.url = '/subpkg/goods_list/goods_list?' + prod.navigator_url
                                        .split('?')[1]
                                }
                            })
                        }
                    })

                    this.floorList = message
                    // console.log('设置的楼层数据:', this.floorList)
                    // uni.$showMsg('楼层图加载成功') // 移除不必要的提示
                } catch (error) {
                    console.error('楼层请求异常:', error)
                    uni.showToast({
                        title: '楼层请求失败',
                        duration: 1500,
                        icon: 'none'
                    })
                } finally {
                    uni.hideLoading()
                }
            },

            // 跳转到搜索页面
            gotoSearch() {
                uni.navigateTo({
                    url: '/subpkg/search/search'
                })
            }
        }
    }
</script>

<style lang="scss">
    // 轮播图样式
    swiper {
        width: 100%;
        height: 300rpx;
    }

    .swiper-item {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .swiper-item image {
        width: 100%;
        height: 100%;
        mode: "widthFix";
    }

    // 分类导航样式
    .nav-list {
        width: 100%;
        display: flex;
        justify-content: space-around;
        padding: 10rpx;
        box-sizing: border-box;
    }

    .nav-item image {
        width: 128rpx;
        height: 130rpx;
    }

    // 楼层样式
    .floor-title {
        width: 100%;
        height: 60rpx;
    }

    // 楼层右侧图片
    .right-img-box {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;

    }

    .floor-img-box {
        display: flex;
        padding-left: 10rpx;
    }

    .search-box {
        position: sticky;
        top: 0;
        z-index: 999;
        margin: 0;
        padding: 0;
    }
</style>